﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/report3.css">
    <link rel="stylesheet" href="../static/css/moniter.css">
    <link rel="stylesheet" href="../static/css/laydate.css">
    <script src="../static/js/laydate.js"></script>
<title>容智车联车厢管家</title>
    <style>
        .table01-lj table tbody {
            height: 140px;
        }
        .table01-lj {
            height: 192px;
        }
        .map-b-div {
            height: 242px;
        }
        .map-t-div {
            padding-bottom: 254px;
        }
        .table th, .table td {
            padding:2px 8px;

        }
        .table01-lj tr{height:35px;}
        .table01-lj table thead, .table01-lj tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: auto;
        }
        .showdiv{padding-top:50px;height:100%;box-sizing:border-box;}
        .displayN{display:none;}
        .pos-ablj{right:150px;}
        .position-r{position:relative;}
        .position-a{position:absolute;}
        .margin-b5{margin-bottom: 5px;}
        .margin-b15{margin-bottom: 15px;}
        .width100{width:100%;}
        .gongshi-box .same-set-int{box-sizing: border-box;height:35px;line-height: 35px;}
        .cover-bg{background: rgba(51, 51, 51, 0.8);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;}
        .gongshi-box{width:260px;height:300px;padding:20px 50px;border-radius: 5px;background: #fff;position:absolute;top:50%;left:50%;margin-left:-130px;margin-top:-160px;}
        .sure-btn{margin-top: 20px;}
    </style>
</head>
<body class="odd-body">
<div class="position-a cover-bg">
    <div class="gongshi-box">
        <div><p class="margin-b5">选择车辆</p><select class="width100 margin-b15 same-set-int" id="scarstring"></select></div>
        <div><p class="margin-b5">开始时间</p><input type="text" id="test1" class="width100 margin-b15 same-set-int"></div>
        <div><p class="margin-b5">结束时间</p><input type="text" id="test2" class="width100 margin-b15 same-set-int"></div>
        <div><button type="button" class="width100 margin-b15 same-set-int sure-btn">确定</button></div>
    </div>
</div>
    <div class="container-fluid" style="padding:0">
    	<div class="row-fluid">
        <!--------------------------以下是侧边栏---------------------------------->
			<div class="span3  bg-white pad-10 bdradius"  style="width: 20%">
				<div class="height100 pos-re">
					<div class="search-lj" style="overflow:hidden;" >
						<form class="navbar-search">
							<input type="text" class="search-query input-medium m-l-25" placeholder="搜索中转站" id="searchStation"/>
						</form>
					</div>
					<div class="ul-lj">
					<ul id="vehi-list">
					<#list stationList as station>
                        <li class=" p-bt-10 b-botom pos-re">
                            <a href="javascript:void(0);" title='${station.name!""}（${station.carCount!""}辆）'>
                                <span class="txt-limit getCars" name="${station.id!""}">${station.name!""}（${station.carCount!""}辆）</span>
                            </a>
                            <span class="txt-num"></span>
                            <ul class="carListNumbers">
							<#--<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>-->
                            </ul>
                        </li>
					</#list>
					</ul>
				</div>
			</div>
            </div>
        <!--------------------------以下是右边折线图---------------------------------->
        	<div class="span9 pull-right  pos-re lijia-div" >
<div class="pos-re height100 width100">


	<div class="spos-re height100">
		<div class="row-fluid height100">
			<div class="mapdiv height100">
				<div class="span12 map-zone ov-h bdradius bg-white pos-re" style="height:100%" >
					<div class="pos-re tabChange" style="height: 50px;line-height: 30px;width: 100%;position:absolute;">
						<p class="pad-10 p-l-20 font-w">
							每日出车次数
						</p>
                        <div class="row pos-ab3 ov-h bdradius pos-ablj" style="cursor:pointer;">
                            <span class="span6 twin-bg t-c takeout">导出</span>
                        </div>
						<div class="row pos-ab3 ov-h" style="cursor:pointer;">
							<span class="span6 twin-bg t-c">月度</span>
							<span class="span6 t-c">年度</span>
						</div>
					</div>
					<div class="showdiv" style="height:100%;width: 100%;">
						<div class="map-zone2 showmap" id="main" style="height:100%;width: 100%;">
							<!--这里是柱状图容器-->
						</div>
						<div class="map-zone2  showmap" id="main1" style="height:100%;width: 100%;">

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
             </div>
			</div>
        </div>
    </div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/echarts.common.min.js"></script>
<script src="../static/js/task.js"></script>
<script src="../static/js/report3.js"></script>
	<script>
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
		$(function () {
			$('.tabChange').on('click','span',function(){
			$(this).addClass('twin-bg');
			$(this).siblings('span').removeClass('twin-bg');
			var index = $(this).index();
			var table = $('.tabChange').siblings('.showdiv');
			table.find('.showmap').css('display','none');
			table.find('.showmap:eq('+index+')').css('display','block');
			});

            $('.takeout').on('click',function(){
                $('.cover-bg').show();
                //通过clientId获取车辆列表
                //ajax start
                $.ajax({
                    type: "POST",
                    url: "../car/getCarsByClient",
                    dataType : 'json',
                    success: function(data){
                        $('#scarstring').html(data.msg);
                    }
                });
                //ajax end
            })
            $('.sure-btn').on('click',function(){
                $('.cover-bg').hide();

                var carno = $('#scarstring').val();

                var ctime = $('#test1').val();
                var etime = $('#test2').val();

                location.href = "../report/exportReport?carno="+carno+"&cTime="+ctime+"&etime="+etime;



            });



            $(document).on('click','.getCars',function(){
                var stationId = $(this).attr('name');
//            alert(stationId);
                $.ajax({
                    type: "POST",
                    url: "../car/getCarListByStationId",
                    dataType:'json',
                    data:{
                        "stationId":stationId
                    },
                    success:function(data){
                        if(data.status == "success")
                        {
                            var carString = data.msg;
//                        alert(carString);
                            $('.carListNumbers').html(carString);
                        }
                        else {
//                        alert(1111);
                        }
                    }
                });

            });


            /**
             * 搜索触发事件
             */
            $("#searchStation").keyup(function(){
                var text = $(this).val();
//            alert(text);
                $.ajax({
                    type: "POST",
                    url: "../station/getStationByKey",
                    dataType:'json',
                    data:{
                        "text":text
                    },
                    success:function(data){
                        if(data.status == "success")
                        {

                            var str = data.stationList;
                            $('#vehi-list').html(str);
                        }
                        else {
//                        alert(1111);
                        }
                    }
                });
            });
		})
	</script>
</body>
</html>
